<script>

export default {
  data() {
    return {
      imageUrl: '',
      input:'',
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        picture:'',
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      rules:{
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 6, message: '用户名长度在 3 到 6 个字符', trigger: 'blur' }
        ],

      }
    };
  },
  methods:{
    fail(){
      this.$message({
        showClose: true,
        message: '您未成功修改信息',
        type: 'warning'
      });
    },
    success(){

      this.$message({
        showClose: true,
        message: '修改成功',
        type: 'success'
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }

  }

}
</script>
<template>

  <div class="wrapper">
    <div class="left">
      <img src="../assets/用户.png" alt="" style="margin-top: 30%;">
      <div class="inputDeep" align="left" style="margin-left: 8%; ">




      </div>
      <el-dialog title="编辑个人信息" :visible.sync="dialogFormVisible":modal-append-to-body="false" >
        <el-form :model="form":rules="rules">
          <span>上传图片</span>
          <div>
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>


          <el-form-item label="用户名" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name" autocomplete="off" type="text"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false;fail()">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false;success()">确 定</el-button>
        </div>
      </el-dialog>




      <p></p>
      <P></P>
    </div>
    <div class="right">
      <div class="info">
        <h2 class="alimama">个人中心信息管理</h2>
        <div class="info_data">
          <div class="data">
            <h4>用户名</h4>
            <p>0001</p>
          </div>
          <div class="data">
            <h4>账号</h4>
            <p>alex@gmail.com</p>
          </div>


        </div>
<!--        <div class="info_data">-->
<!--          <div class="data">-->
<!--            <h4>手机</h4>-->
<!--            <p>0001-213-998761</p>-->
<!--          </div>-->
<!--        </div>-->


      </div>

<!--      <div class="projects">-->
<!--        <h3>Projects</h3>-->
<!--        <div class="projects_data">-->
<!--          <div class="data">-->
<!--            <h4>账号</h4>-->
<!--            <p>Lorem ipsum dolor sit amet.</p>-->
<!--          </div>-->
<!--          <div class="data">-->
<!--            <h4>创建时间</h4>-->
<!--            <p>dolor sit amet.</p>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->

      <div class="projects">
        <h3 class="alimama">功能</h3>
        <div class="projects_data">


        </div>
        <div align="center" class="projects_data">
          <div class="data">

              <el-button  style="margin-top: 13px" type="text" @click="dialogFormVisible = true" >编辑个人信息</el-button>

<!--            <p>dolor sit amet.</p>-->
          </div>
          <div class="data">
            <h4>注销</h4>
            <!--            <p>dolor sit amet.</p>-->
          </div>
        </div>

      </div>
    </div>
  </div>

</template>

<style scoped>

@import "../assets/css/fonts/fonts.css";
.alimama{
  font-family: Alimama ,sans-serif !important;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e0e0e0;
  color: #353c4e;
  text-transform: uppercase;
  letter-spacing: 5px;
}

* {

  //margin: 0;
  //padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: 'Josefin Sans', sans-serif;
}

body {
  background-color: white;

}

.wrapper {
  height:86vh;
  width: 99%;
  margin-top: 5vh;
  position: absolute;
  margin-left: 1vh;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);


  display: flex;
  box-shadow: 0 1px 20px 0 rgba(69, 90, 100, .08);
}

.wrapper .left {

  width: 35%;

  padding: 30px 25px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  text-align: center;
  color: #fff;
  background: radial-gradient(circle at 10% 20%, rgb(239, 246, 249) 0%, rgb(206, 239, 253) 90%)



}

.wrapper .left img {
  border-radius: 5px;
  margin-bottom: 10px;
}

.wrapper .left h4 {
  margin-bottom: 10px;
}

.wrapper .left p {
  font-size: 12px;
}

.wrapper .right {
  width: 65%;
  background: #fff;
  padding: 30px 25px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.wrapper .right .info,
.wrapper .right .projects {
  margin-bottom: 25px;
}



.wrapper .right .info_data,
.wrapper .right .projects_data {
  display: flex;
  justify-content: space-between;
}

.wrapper .right .info_data .data,
.wrapper .right .projects_data .data {
  width: 45%;
}

.wrapper .right .info_data .data h4,
.wrapper .right .projects_data .data h4 {
  color: #353c4e;
  margin-bottom: 5px;
}

.wrapper .right .info_data .data p,
.wrapper .right .projects_data .data p {
  font-size: 13px;
  margin-bottom: 10px;
  color: #919aa3;
}

.wrapper .social_media ul {
  display: flex;
}

.wrapper .social_media ul li {
  width: 45px;
  height: 45px;
  background: linear-gradient(to right, #d3d6d6, #d6dada);
  margin-right: 10px;
  border-radius: 5px;
  text-align: center;
  line-height: 45px;
}

.wrapper .social_media ul li a {
  color: #fff;
  display: block;
  font-size: 18px;
}
.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}


.el-input /deep/ .el-input__inner {
  background-color: rgba(255, 255, 255, 0);

}
.el-input__inner::-webkit-input-placeholder {
  color: white;

}

/deep/ input::-webkit-input-placeholder {
  color:white;

}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>